<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<style>
			/* 当屏幕小于575px时使用以下样式 等于 xs */
			@media(max-width:575px) {
				.box {
					width: 100%;
				}
			}

			/* 等于 sm */
			@media(min-width:576px) and (max-width:767px) {
				.box {
					width: 100%;
				}
			}

			/* 等于 md */
			@media(min-width:768px) and (max-width:991px) {
				.box {
					width: 768px;
				}
			}

			/* 等于 lg */
			@media(min-width:992px) {
				.box {
					width: 992px;
				}
			}

			#box1 {
				border: 1px solid red;
				box-sizing: border-box;
				margin-top: 10px;
			}

			#box2 {
				border: 1px solid blue;
				box-sizing: border-box;
				margin-top: 10px;
			}
			
			#box3 {
				border: 1px solid red;
				box-sizing: border-box;
				margin-top: 10px;
			}
			
			#box4 {
				border: 1px solid blue;
				box-sizing: border-box;
				margin-top: 10px;
			}

			.box {
				margin: auto;
			}

			#box1>div>div {
				height: 80px;
			}

			#box2>div>div {
				height: 80px;
			}
			#box3>div>div {
				height: 80px;
			}
			
			#box4>div>div {
				height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div id="box1" class="layui-row">
				<div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
					<div style="background-color: aqua;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: pink;"></div>
				</div>
			</div>

			<div id="box2" class="layui-row">
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: blue;"></div>
				</div>
				
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: green;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: aquamarine;"></div>
				</div>
			</div>
			
			<div id="box3" class="layui-row">
				<div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
					<div style="background-color: aqua;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: goldenrod;"></div>
				</div>
			</div>
			
			<div id="box4" class="layui-row">
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: royalblue;"></div>
				</div>
				
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: greenyellow;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
					<div style="background-color: lightcoral;"></div>
				</div>
			</div>
		</div>
		<script src="../layui-v2.6.8/layui/layui.js"></script>
	</body>
</html>